<template>
  <s-layout title="我的中奖记录">
    <view class="lottery-result-container">
      <view class="result">
        <view class="result-item"  
          v-for="result in state.resultList"
          :key="Math.random()"
		  @click="routego(result)"
        >
          <view class="result-item-header">
            <view class="title">抢红包结果</view>
            <view class="prize-list">
              <!-- 单个奖品 -->
              <view 
                class="prize-name"
                @click="toPrizePage(result)"
              >{{ result.name }}</view>
              <!-- 多个奖品 -->
              <!-- <block 
                v-for="(coupon, index) in result.couponType"
                :key="coupon"
              >
                <view class="prize-name">{{ coupon }}</view>
                <view 
                  v-if="index < result.couponType.length - 1 && result.couponType.length > 1"
                  class="plus"
                >
                  +
                </view>
              </block> -->
            </view>
          </view>
          <view class="result-item-body">
            <view class="item">
              <view>抢红包时间</view>
              <view>{{ result.create_time }}</view>
            </view>
			<view class="item">
			  <view>领取方式</view>
			  <view>{{ result.point === 'goods' ? '线下核销' : result.point === 'online_goods' ? '线上核销' : '平台发放' }}</view>
			</view>
            <view class="item">
              <view>抢红包方式</view>
              <view>{{ LOTTERY_TYPE[result.type] }}</view>
            </view>
			<view
			  class="itemdetail"
			>
			<!-- v-if="result.point === 'goods'" -->
			<!-- @click="sheep.$router.go('/pages/tuangou/write_of?id=' + result.id)" -->
			  查看详情
			  <view class="jt" />
			</view>
          </view>
        </view>
      </view>
    </view>

    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
    <s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无抢红包结果"></s-empty>
  </s-layout>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const LOTTERY_TYPE = {
    week: '每周抢红包',
    register: '新人抢红包',
    buy: '消费抢红包',
	day:'超级天天乐'
  }

  const state = reactive({
    resultList: [
      // #NOTE 以下方式是抢红包结果为多种情况
      // {
      //   id: 1,
      //   time: '2024.04.07 20:00:00',
      //   style: '消费抢红包',
      //   couponType: ['5元现金', '满60减3优惠券']
      // },
    ],
    pagination: {
      current_page: 1,
      last_page: 1,
      total: 0
    },
    loadStatus: '', // 加载更多状态 ['more' | 'noMore']
  });
  const routego = async(res) => {
	  if(res.point === 'goods'){
		  sheep.$router.go(`/pages/tuangou/write_of?id=${res.id}`);
	  }else if(res.point === 'online_goods'){
		  sheep.$router.go(`/pages/tuangou/claim_prizes?id=${res.id}`);
	  }else{
		  await sheep.$store('user').getInfo();
		  sheep.$router.go('/pages/user/wallet/money');
	  }
	  // sheep.$router.go(`/pages/tuangou/claim_prizes?id=${res.id}`);
  }
  const getRecordList = () => {
    sheep.$api.prize_week.lotteryuserDayuserLotteryLog({ page: state.pagination.current_page }).then((res) => {
      const { data, error } = res
      console.log(data, '数据')

      if (error == 0) {
        const { total, current_page, last_page } = data
        state.resultList = [...state.resultList, ...data.data]

        Object.assign(state.pagination, { total, current_page, last_page })

        if (state.pagination.current_page < state.pagination.last_page) {
          state.loadStatus = 'more';
        } else {
          state.loadStatus = 'noMore';
        }

        console.log(state.loadStatus, 'state.loadStatus')
      }
    });
  }

  const toPrizePage = res => {
    console.log(res.point, 'res==')
    // uni.showToast({
    //   icon: 'none',
    //   title: '请联系客服',
    //   duration: 1000,
    // });
    // 优惠券
    // sheep.$router.go('/pages/coupon/list');
    // 余额
    // sheep.$router.go('/pages/user/wallet/money');
  }

  const loadmore = () => {
    if (state.loadStatus !== 'noMore') {
      state.pagination.current_page ++
      getRecordList();
    }
  }

  onLoad(() => {
    getRecordList()
  });

  onReachBottom(() => {
    console.log('触底了。')
     loadmore()
  });
</script>

<style lang="less" scoped>
.lottery-result-container{
  background-color: #f2f3f6;
  font-family: PingFang SC;
  .result {
 
    &-item {
      background-color: #fff;
      margin: 10rpx 10rpx 0 10rpx; 
      padding: 20rpx 10rpx 10rpx 10rpx;
      box-sizing: border-box;
      &-header {
        border-bottom: 2rpx solid #F0F0F0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0 10rpx 0;
        .title {
          font-size: 28rpx;
          color: #3D3D3D;
          font-weight: 400;
        }
        .prize-list {
          display: flex;
          align-items: center;
        }
        .prize-name {
          color: #fff;
          background: linear-gradient(270deg, #003AD9 0%, #3DC8FF 100%);
          height: 60rpx;
          padding: 0 16rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 20rpx;
        }
        .plus {
          color: #003AD9;
          font-weight: bold;
          font-size: 28rpx;
          margin: 0 12rpx;
        }
      }
      &-body {
        padding: 20rpx 0 10rpx 0;
        .item {
          display: flex;
          justify-content: space-between;
          view {
            color: #C6C6C6;
            font-weight: 400;
            font-size: 24rpx;
          }
        }
		.itemdetail{
			border-top: 2rpx solid #F0F0F0;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 10rpx;
			font-size: 24rpx;
			padding-top: 10rpx;
			.jt {
			  width: 12rpx;
			  height: 12rpx;
			  border-top: 4rpx solid #000;
			  border-right: 4rpx solid #000;
			  transform: rotate(45deg);
			  margin-left: 5rpx;
			}
		}
        .item:first-child {
          margin-bottom: 14rpx;
        }
      }
    }
  }
}

</style>
